import React, {Component} from 'react';
import {observer, inject} from 'mobx-react';
import {Link, withRouter} from 'react-router-dom';
import cssModules from 'react-css-modules';
import {message, Checkbox} from 'antd';
import IconFont from 'component/IconFont';
import Screen from 'util/full/screen';

import styles from './index.less';
import moment from 'moment';

//防止内存泄露
function inject_unount(target) {
  let next = target.prototype.componentWillUnmount;
  target.prototype.componentWillUnmount = function() {
    if (next) next.call(this, ...arguments);
    this.unmount = true;
  };
  // 对setState的改装，setState查看目前是否已经销毁
  let setState = target.prototype.setState;
  target.prototype.setState = function() {
    if (this.unmount) return;
    setState.call(this, ...arguments);
  };
}
@observer
@cssModules(styles)
@inject_unount
class Header extends Component {
  state = {
    time: moment().format('HH:mm'),
  };
  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({
        time: moment().format('HH:mm'),
      });
    }, 60000);
  }
  componentWillUnmount() {
    if (this.timer != null) {
      clearInterval(this.timer);
    }
  }
  render() {
    return (
      <div styleName="header-container">
        {/* <div styleName={'header-logo'} /> */}
        <div styleName={'header-title'} />
        <div
          styleName={'header-full-screen'}
          onClick={() => {
            if (Screen.isFull()) {
              Screen.exitFull();
            } else {
              Screen.requestFull(document.getElementById('viewport'));
            }
          }}>
          <IconFont type={'iconquanping1'} styleName={'item-icon'} />
        </div>
        <div styleName={'header-time'}>
          <div styleName={'time'}>{this.state.time}</div>
          <div styleName={'day'}>
            <span>{moment().format('dddd')}</span>
            <span>{moment().format('YYYY/MM/DD')}</span>
          </div>
        </div>
      </div>
    );
  }
}

export default Header;
